<template>
  <div class="login-cap">找回密码</div>
  <div class="login-sub-title">通过你的手机号重置密码，或 <span>邮箱重置密码</span></div>
  <div class="login-sub-title">请输入你的邮箱，我们会发送邮件给你，帮助你重置密码，或者你也可以 <span>手机号重置密码</span></div>

  <a-form
    ref="formRef"
    :model="formState"
    :rules="rules"
    :label-col="labelCol"
    :wrapper-col="wrapperCol"
  >
    <a-form-item ref="phone" label="手机号" name="name">
      <a-input  placeholder="输入手机号">
      <template #addonBefore>
        <a-select  placeholder="选择区"  style="width: 90px">
          <a-select-option value="+86">+86</a-select-option>
        </a-select>
      </template>
    </a-input>
    </a-form-item>
    <a-form-item ref="name" label="验证码" name="name">
      <a-space>
          <a-input  placeholder="输入验证码" />
          <a-button >获取手机短信验证码</a-button>
        </a-space>
    </a-form-item>

    <a-form-item ref="EMail" label="邮箱" name="name">
      <a-input  placeholder="输入邮箱"></a-input>
    </a-form-item>
    <a-form-item ref="name" label="验证码" name="name">
      <a-row type="flex" justify="space-between">
          <a-col class="sms-input">
            <a-input placeholder="获取图片验证码" name="code" />
          </a-col>
          <a-col class="sms-right">
            <a-tooltip content="点击刷新" placement="bottom">
              <img class="codeImg" alt="点击刷新"  />
            </a-tooltip>
          </a-col>
        </a-row>
    </a-form-item>
    
    <a-form-item>
      <a-button type="primary">下一步</a-button>
    </a-form-item>
  </a-form>
  <div class="single-form-footer-actions flex">
          <Space class="mr-auto"><router-link to="/login">返回登录</router-link></Space>
        </div>
    <div class="login-cap">设置新密码</div>
  <!-- <div class="login-sub-title">专业顾问一对一服务</div> -->
  <a-form
    ref="formRef"
    :model="formState"
    :rules="rules"
    :label-col="labelCol"
    :wrapper-col="wrapperCol"
  >
    <a-form-item ref="name" label="新密码" name="name">
      <a-input v-model:value="formState.name" />
    </a-form-item>
    <a-form-item ref="name" label="确认密码" name="name">
      <a-input v-model:value="formState.name" />
    </a-form-item>
    
    <a-form-item >
      <a-button type="primary">确定修改</a-button>
    </a-form-item>
  </a-form>
  <div><span>*注册成功，立即获得15天旗舰版免费试用！</span></div>
</template>
<script lang="ts" setup>
import { reactive, ref, toRaw } from 'vue';
import type { UnwrapRef } from 'vue';
import type { Rule } from 'ant-design-vue/es/form';
interface FormState {
  resource: string;
  username: string;
  password: string;
  organName: string ;
  EMail: string | undefined;
  termsCheck: boolean;
}
const formRef = ref();
const labelCol = { span: 5 };
const wrapperCol = { span: 13 };
const formState: UnwrapRef<FormState> = reactive({
  resource: '1',
  username: '',
  password: '',
  organName: '',
  EMail: '',
  termsCheck: false
});

const rules: Record<string, Rule[]> = {
  username: [
    { required: true, message: 'Please input Activity name', trigger: 'change' },
    { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
  ],
}

const onSubmit = () => {
  formRef.value
    .validate()
    .then(() => {
      console.log('values', formState, toRaw(formState));
    })
    .catch(error => {
      console.log('error', error);
    });
}
</script>